<template>
  <view class="order-edit">
    <view class="top-bg"></view>
    <!-- 导航栏 -->
    <s-nav-bar title="上传素材" :background="'transparent'" :titleStyle="{ color: '#ffffff', fontWeight: 'bold' }" statusBar
      back :backStyle="{ color: '#ffffff' }">
    </s-nav-bar>

    <!-- 表单内容 -->
    <scroll-view class="main-scroll" scroll-x="false" scroll-y="true">
      <view class="order-info">
        <view class="info">
          <view class="top">
            <view class="label">场次</view>
            <view class="status">{{
              orderInfo.has_material === 0 ? "待提交" :
              orderInfo.has_material === 1 ? "已提交" :
                "无需备份"
            }}</view>
          </view>
          <view class="main">{{ orderInfo.customer_name }} - {{ orderInfo.type }}</view>
        </view>
      </view>
      <view class="form-container">
        <!-- 客户信息 -->
        <view class="form-section">
          <view class="section-header">
            <view class="header-line"></view>
            <text class="header-text">场次详情</text>
          </view>

          <view class="order-detail">
            <view class="item full">
              <view class="label">日期</view>
              <view class="value">{{ orderInfo.start_date }} - {{ orderInfo.end_date }}
              </view>
            </view>
            <view class="item">
              <view class="label">类型</view>
              <view class="value">{{ orderInfo.type }} </view>
            </view>
            <view class="item">
              <view class="label">状态</view>
              <view class="value">{{ orderInfo.status }} </view>
            </view>
          </view>
        </view>
        <view class="form-section">
          <view class="section-header">
            <view class="header-line"></view>
            <text class="header-text">素材提交</text>
          </view>
          <view class="formItem">
            <view class="label">素材链接
              <text style="color: #e00; padding-left: 10rpx"> * </text>
            </view>
            <view class="textarea-box">
              <uni-easyinput type="textarea" class="textarea" placeholder="请输入素材链接(支持网盘等链接)"
                v-model="orderInfo.m_link"></uni-easyinput>
            </view>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-btn">
          <button class="submit-button" @click="saveMaterial">
            <text>上传素材</text>
          </button>
        </view>
      </view>
    </scroll-view>
    <s-dialog></s-dialog>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      orderInfo: {},
    };
  },
  computed: {},
  onLoad(options) {
    this.orderId = options.id;
    this.getOrderDetail();
  },
  methods: {
    // 获取订单详情
    getOrderDetail() {
      this.sjuAjax.get(
        "/material/getByOrder",
        { order_id: this.orderId },
        (res) => {
          if (res && res.code === 200) {
            this.orderInfo = res.data;
          }
        }
      );
    },
    saveMaterial() {
      this.sjuAjax.post(
        "/material/upload",
        { ...this.orderInfo, order_id: this.orderId },
        (res) => {
          if (res && res.code === 200) {
            this.sjuAlert.showInfo("保存成功");
            setTimeout(() => {
              this.sjuNav.navigateBack();
            }, 1000);
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.order-edit {
  background-color: var(--v-bg);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top-bg {
  width: 100%;
  height: 312rpx;
  border-radius: 0 0 24rpx 24rpx;
  background: var(--v-linear);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.main-scroll {
  flex-grow: 1;
  height: 0;
}

.form-container {
  padding: 30rpx;
  opacity: 0.97;
}

.form-section {
  background-color: #fff;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: var(--v-shadow);
}

.section-header {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  border-bottom: 2rpx solid #f1f1f1;
}

.header-line {
  width: 8rpx;
  height: 32rpx;
  background-color: var(--v-theme);
  margin-right: 20rpx;
  border-radius: 4rpx;
}

.header-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.form-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.item-label {
  display: block;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.item-label.required::after {
  content: "*";
  color: #f56c6c;
  margin-left: 8rpx;
}

.item-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;

  >* {
    margin-right: 20rpx;
    /* Replaced gap: 20rpx */
    margin-bottom: 20rpx;

    &:last-child {
      margin-right: 0;
      /* Remove margin from last child */
    }
  }
}

.radio-item {
  padding: 16rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666;
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
}

.input-with-unit {
  display: flex;
  align-items: center;
}

.input-with-unit .item-input {
  flex: 1;
}

.unit {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--v-theme);
}

.submit-btn {
  padding: 30rpx;
  padding-bottom: 40rpx;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: var(--v-linear);
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.placeholder {
  color: #999;
}

.active {
  background-color: var(--v-theme);
  color: #fff;
  border-color: var(--v-theme);
}

/* 员工选择弹窗样式 */
.staff-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.staff-list {
  max-height: 60vh;
}

.staff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.staff-name {
  font-size: 30rpx;
  color: #333;
}

.staff-position {
  font-size: 26rpx;
  color: #999;
}

.empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  color: #999;

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}

.order-info {
  padding: 30rpx;

  .info {
    background: rgba(255, 255, 255, 0.9);
    padding: 30rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;
      color: var(--v-gray);
    }

    .main {
      padding: 10rpx 0;
      font-size: 46rpx;
    }
  }
}

.order-detail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30rpx;

  .item {
    width: calc(50% - 60rpx);

    &.full {
      width: 100%;
    }

    display: flex;
    align-items: center;
    padding: 16rpx 0;
    height: 32rpx;
    line-height: 32rpx;

    >* {
      margin-right: 20rpx;

      /* Replaced gap: 20rpx */
      &:last-child {
        margin-right: 0;
        /* Remove margin from last child */
      }
    }
  }
}

.formItem {
  padding: 30rpx;
  display: flex;
  flex-direction: column;

  >* {
    margin-bottom: 16rpx;

    /* Replaced gap: 16rpx */
    &:last-child {
      margin-bottom: 0;
      /* Remove margin from last child */
    }
  }

  .textarea {
    background: var(--v-bg);
  }
}</style>